<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增文物管理')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-exhibit-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">文物名：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">文物类型：</label>
                <div class="col-sm-8">
                    <select name="typeId" class="form-control m-b" th:with="type=${@exhibitType.getType()}" required>
                    	<option value="">无分类</option>
                        <option th:each="eh : ${type}" th:text="${eh.name}" th:value="${eh.id}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">3D链接：</label>
                <div class="col-sm-8">
                    <textarea name="url" class="form-control" required></textarea>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label is-required">所属博物馆：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="museum" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">描述信息：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control" required></textarea>
                </div>
            </div>
<!--             <div class="form-group">     -->
<!--                 <label class="col-sm-3 control-label is-required">是否展示：</label> -->
<!--                 <div class="col-sm-8"> -->
<!--                     <input name="isShow" class="form-control" type="text"> -->
<!--                 </div> -->
<!--             </div> -->
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">是否重点文物：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('mus_exhibit_important')}">
                        <input type="radio" th:id="${dict.dictCode}" name="isImportant" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
<!--             <div class="form-group"> -->
<!--                 <label class="col-sm-3 control-label is-required">图片：</label> -->
<!--                 <div class="col-sm-8"> -->
<!--                     <div class="file-loading"> -->
<!--                         <input id="exhibitFile" name="file" class="file" type="file" data-min-file-count="1" data-theme="fas"> -->
<!--                     </div> -->
<!--                 </div> -->
<!--             </div> -->
			<div class="form-group">
		    <label class="col-sm-3 control-label">图片：</label>
				<div class="col-sm-8">
					<div class="file-loading">
						<input id="exhibitFile" type="file" class="file" name="file" required>
					</div>
				</div>
			</div>
			<div class="form-group">
		    	<label class="col-sm-3 control-label"></label>
				<div class="col-sm-8">
					<div class="file-loading">
						<img id="img" style="width: 60%; height:60%;">
					</div>
				</div>
			</div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        $(document).ready(function () {
        	$("#exhibitFile").change(function(){
				var file = this.files[0];
				if (window.FileReader) {    
					var reader = new FileReader();    
				    reader.readAsDataURL(file);    
			    	reader.onloadend = function (e) {
			    		$("#img").val(e.target.result);
			       		$("#img").attr("src", e.target.result);
			       	};    
			    } 
			});
        });
        var prefix = ctx + "museum/exhibit"
        $("#form-exhibit-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
        	if ($.validate.form()) {
	            var formdata = new FormData($("#form-exhibit-add")[0]);
	            $.ajax({
	                url: prefix + "/add",
	                data: formdata,
	                type: "post",
	                processData: false,
	                contentType: false,
	                success: function(result) {
	                    $.operate.saveSuccess(result);
	                }
	            })
        	}
        }


    </script>
</body>
</html>